<template>
  <footer class="footer bg-white border-t border-gray-1200">
    <div class="footer-content max-w-8xl mx-auto pt-16 pb-6 px-4 sm:px-6 lg:pt-16 lg:pb-6 lg:px-8">
      <div class="xl:grid xl:grid-cols-5 xl:gap-2">
        <div class="space-y-8 xl:col-span-1">
          <common-link path="/"
            class="flex-shrink-0">
            <span class="sr-only">Toolify</span>
            <img class="h-10"
              src="@/static/images/logo.png"
              alt="Toolify logo" />
          </common-link>

          <div class="text-base font-semibold text-black tracking-wider">
            {{$t('footerDesc')}}
          </div>
        </div>
        <div class="mt-12 grid md:grid-cols-9 gap-3 xl:mt-0 md:col-span-2 xl:col-span-4"
          v-loading="loading">
          <div class="md:gap-8 md:col-span-2 xl:col-span-2">
            <div class="text-base font-semibold text-black tracking-wider">
              {{$t('footer_Product')}}
            </div>
            <ul role="list"
              class="mt-4 space-y-3">
              <li v-for="(item, key) in fastLinksList">
                <common-link :path="item.path"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  {{$t(item.title)}}
                </common-link>
              </li>
            </ul>
          </div>
          <div class="md:gap-8 md:col-span-2 xl:col-span-2">
            <div class="text-base font-semibold text-black tracking-wider">
              {{$t('footer_Resourse')}}
            </div>
            <ul role="list"
              class="mt-4 space-y-3">
              <li>
                <a :href="`${locale==='en'?'':`/${locale}`}/blog`"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  {{$t('header_blog')}}
                </a>
              </li>
              <li v-for="(item,key) in footerData.article_types"
                :key="key">
                <a :href="item.url_path"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  {{item.name}}
                </a>
              </li>
              <li>
                <a href="/author"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  {{$t('footer_author')}}
                </a>
              </li>
              <li>
                <a href="/top-ai-tools"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  {{$t('footer_topAiTools')}}
                </a>
              </li>
            </ul>

            <div class="text-base font-semibold text-black tracking-wider mt-6">
              {{$t('footer_BrowseByAlphabet')}}
            </div>
            <ul class="flex items-center flex-wrap mt-2">
              <li class="py-1 mr-2 xl:mr-0"
                v-for="(item,key) in footerData.alphabet_urls"
                :key="key">
                <a :href="item.url"
                  class="text-sm text-gray-500 px-1 py-1 hover:text-purple-1300 hover:underline">
                  {{item.title}}
                </a>
              </li>
            </ul>

            <div class="text-base font-semibold text-black tracking-wider mt-6">
              {{$t('footer_Top1000ShopifySpy')}}
            </div>
            <ul class="flex items-center flex-wrap mt-2 xl:grid xl:grid-cols-3 gap-3">
              <li class="py-1 mr-2 xl:mr-0"
                v-for="(item,key) in footerData.top1000_dates"
                :key="key">
                <a :href="item.url"
                  class="text-sm text-gray-500 px-1 py-1 hover:text-purple-1300 hover:underline">
                  {{item.title}}
                </a>
              </li>
            </ul>
          </div>
          <div class="md:gap-8 md:col-span-3 xl:col-span-3">
            <div class="text-base font-semibold text-black tracking-wider">
              {{$t('footer_ReadMore')}}
            </div>
            <ul role="list"
              class="mt-4 space-y-3">
              <li v-for="(item,key) in footerData.latest_articles"
                :key="key">
                <a :href="item.url_path"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  {{item.title}}
                </a>
              </li>
            </ul>
          </div>
          <div class="md:gap-8 md:col-span-2 xl:col-span-2">
            <div class="text-base font-semibold text-black tracking-wider">
              {{$t('footer_About')}}
            </div>
            <ul role="list"
              class="mt-4 space-y-3">
              <li>
                <common-link path="/privacy-policy"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  {{$t('footer_privacyPolicy')}}
                </common-link>
              </li>
            </ul>

            <div class="text-base font-semibold text-black tracking-wider mt-6">
              {{$t('footer_ContactUs')}}
            </div>
            <ul role="list"
              class="mt-4 space-y-3">
              <li>
                <a href="mailto:business@toolify.ai"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  business@toolify.ai
                </a>
              </li>
            </ul>

            <div class="text-base font-semibold text-black tracking-wider mt-6"
              v-if="hasRealVal(categoryAttributeList) && categoryAttributeList.length > 0">
              {{$t('footer_moreTools')}}
            </div>
            <ul role="list"
              class="mt-4 space-y-3"
              v-if="hasRealVal(categoryAttributeList) && categoryAttributeList.length > 0">
              <li v-for="(item,key) in categoryAttributeList"
                :key="key">
                <common-link path="/category-attribute/:handle"
                  :params="{handle: item.handle}"
                  class="text-sm text-gray-500 hover:text-purple-1300 hover:underline">
                  {{item.show_name}}
                </common-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="language-list">
        <nuxt-link v-for="(item,key) in languagesOptions"
          no-prefetch
          :prefetch="false"
          :key="key"
          event=""
          :to="{path: locale === 'en' ? (item.value==='en' ? $route.fullPath:`/${item.value}${$route.fullPath}`):(item.value==='en' ? ($route.fullPath.startsWith(`/${locale}/`) ? $route.fullPath.replace(`/${locale}`,''):$route.fullPath.replace(`/${locale}`,'/')):$route.fullPath.replace(`/${locale}`,`/${item.value}`))}"
          :class="{'language-actived': item.value === $store.state.locale,'hover:opacity-90': item.value === $store.state.locale }"
          @click.stop.native.prevent="beforeChange(item.value)">
          {{item.label}}
        </nuxt-link>
      </div>
      <div class="mt-5">
        <p class="text-base text-gray-400">{{$t('copyright',{year: new Date().getFullYear()})}}</p>
      </div>
    </div>
  </footer>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'CommonFooter',
  data() {
    return {
      loading: false,
      footerData: {
        article_types: [],
        alphabet_urls: [],
        top1000_dates: [],
        latest_articles: [],
      },
      fastLinksList: [
        {
          path: '/new',
          title: 'header_product_title_NewAI',
        },
        {
          path: '/most-saved',
          title: 'header_product_title_MostSavedAI',
        },
        {
          path: '/most-used',
          title: 'header_product_title_MostUserdAI',
        },
        {
          path: '/browser-extension',
          title: 'header_product_title_browserExtension',
        },
        {
          path: '/apps',
          title: 'header_product_title_apps',
        },
        {
          path: '/discord',
          title: 'header_product_title_discordOfAI',
        },
        {
          path: '/category',
          title: 'header_categories',
        },
        {
          path: '/Best-trending-AI-Tools',
          title: 'header_rank_title_AIRankingMonthly',
        },
        {
          path: '/Best-AI-Tools-Category',
          title: 'header_rank_title_TopAIByCategories',
        },
        {
          path: '/Best-AI-Tools-region',
          title: 'header_rank_title_TopAIFromOverworld',
        },
        {
          path: '/Best-AI-Tools-Source',
          title: 'header_rank_title_AIRankingbyTrafficSource',
        },
        {
          path: '/Best-AI-Tools-revenue',
          title: 'header_rank_title_AIRankingbyRevenue',
        },
        {
          path: '/gpts',
          title: 'header_gpts',
        },
        {
          path: '/submit',
          title: 'header_submit',
        },
        {
          path: '/advertise',
          title: 'header_advertise',
        },
        {
          path: '/update-ai',
          title: 'header_updateAi',
        },
        {
          path: '/submit-gpt',
          title: 'header_submitGpt',
        },
        {
          path: '/business',
          title: 'header_business',
        },
        {
          path: '/favorites',
          title: 'header_favourites',
        },
      ],

      categoryAttributeList: [],
    }
  },
  async fetch() {
    if (process.server && process.env.NODE_ENV !== 'development') {
      this.loading = true

      let [res, attributeRes] = await Promise.all([
        this.$axiosApi.getBlogData(this.locale),
        this.$axiosApi.categoryAttribute(),
      ])

      if (res && res.code === 200) {
        this.footerData = res.data.footer
      }

      if (attributeRes && attributeRes.code === 200) {
        this.categoryAttributeList = attributeRes.data.category_attribute
      }

      this.loading = false
    }
  },
  watch: {
    locale: {
      handler(val, oldVal) {
        if (process.client && process.env.NODE_ENV !== 'development') {
          this.loading = false
          Promise.all([this.getFooterData(), this.getAttribute()])
            .then(() => {
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapState({
      languagesOptions: (state) => state.languagesOptions,
      toolify_isLogin: (state) => state.toolify_isLogin,
      locale: (state) => state.locale,
    }),
  },
  methods: {
    async getFooterData() {
      try {
        const res = await this.$axiosApi.getBlogData(this.locale)
        if (res && res.code === 200) {
          this.footerData = res.data.footer
        }
      } catch (error) {
        console.log(error)
        this.footerData = this.$options.data().footerData
      }
    },
    async getAttribute() {
      try {
        const res = await this.$axiosApi.categoryAttribute()
        if (res && res.code === 200) {
          this.categoryAttributeList = res.data.category_attribute
        }
      } catch (error) {
        console.log(error)
      }
    },
    beforeChange(val) {
      let path =
        this.locale === 'en'
          ? val === 'en'
            ? this.$route.fullPath
            : `/${val}${this.$route.fullPath}`
          : val === 'en'
          ? this.$route.fullPath.startsWith(`/${this.locale}/`)
            ? this.$route.fullPath.replace(`/${this.locale}`, '')
            : this.$route.fullPath.replace(`/${this.locale}`, '/')
          : this.$route.fullPath.replace(`/${this.locale}`, `/${val}`)

      this.$cookies.set('locale', val, {
        maxAge: 60 * 60 * 24 * 365,
        path: '/',
      })

      this.$router.push({
        path: path,
      })
    },
  },
}
</script>
<style lang='scss' scoped>
.footer {
  font-family: helvetica neue, -apple-system, BlinkMacSystemFont, segoe ui,
    Roboto, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji,
    segoe ui symbol, noto color emoji;
  .footer-content {
    font-family: inherit !important;
  }
  ul {
    li {
      font-size: 0;
    }
  }
  .max-w-8xl {
    max-width: 1376px !important;
  }
  .language-list {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 18px 20px;
    margin-top: 20px;

    a {
      font-size: 14px;
      color: #191919;
      line-height: 28px;

      &.language-actived {
        font-weight: 800;
        font-family: 'Metropolis';
      }

      &:hover,
      &.language-actived {
        color: #7150e6;
        opacity: 1;
      }

      &.language-actived:hover {
        opacity: 0.85;
      }
    }
  }
  ::v-deep .el-loading-spinner {
    .circular {
      margin: 0 auto;
    }
  }
}
</style>

